<script type="text/javascript">
    $('#test-datagrid-json').datagrid({
        gridTitle: 'Test datagrid - Json 数据类型，多表头，行内编辑，右键菜单',
        showToolbar: true,
        toolbarItem: 'all',
        addLocation: 'first',
        local: 'local',
        dataUrl: 'datagrid/datagrid-json.js',
        dataType: 'json',
        filterThead: false,
        columns: [
            {
                name: 'operation',
                label: '类型',
                type: 'select',
                items: [{'01': '神话'}, {'02': '传说'}, {'03': '漫画'}, {'04': '历史'}, {'05': '其他'}],
                align: 'center',
                width: 80,
                render: $.datagrid.renderItem
            },
            {
                label: '基本信息',
                columns: [{
                    name: 'name',
                    label: '姓名',
                    align: 'center',
                    width: 100,
                    rule: 'required'
                },
                    {
                        name: 'sex',
                        label: '性别',
                        type: 'select',
                        items: [{'': ''}, {'true': '男'}, {'false': '女'}],
                        align: 'center',
                        width: 40,
                        render: $.datagrid.renderItem
                    },
                    {
                        name: 'age',
                        label: '年龄',
                        type: 'spinner',
                        attrs: {'data-max': '10000'},
                        align: 'center',
                        width: 45
                    },
                    {
                        label: '拼音姓名',
                        columns: [{
                            name: 'firstname',
                            label: '拼音姓',
                            width: 80
                        }, {
                            name: 'lastname',
                            label: '拼音名',
                            width: 80,
                            hide: true
                        }]
                    },
                    {
                        label: '护照信息',
                        columns: [{
                            label: '护照号',
                            columns: [{
                                name: 'passportno',
                                label: '护照号',
                                width: 100
                            }, {
                                name: 'nation',
                                label: '国籍',
                                type: 'lookup',
                                attrs: {'data-url': 'datagrid-lookup-nation.html'},
                                align: 'center',
                                width: 50,
                                rule: 'required',
                                render: function (value) {
                                    return '<img src="images/datagrid/' + value + '.gif">'
                                }
                            }]
                        },
                            {
                                name: 'issuestate',
                                label: '签发状态',
                                type: 'select',
                                items: function (aa) {
                                    return $.getJSON('/datagrid/demo-items-state.js')
                                },
                                align: 'center',
                                width: 70,
                                render: $.datagrid.renderItem
                            },
                            {
                                name: 'issuedate',
                                label: '签发日期',
                                type: 'date',
                                width: 150
                            }]
                    }]
            },
            {
                name: 'isdisable',
                label: '禁用',
                type: 'boolean',
                align: 'center',
                width: 40,
                render: function (value) {
                    return (value && String(value) == 'true') ? '<span style="color:red;">True</span>' : ''
                }
            },
            {
                name: 'createtime',
                label: '登记日期',
                type: 'date',
                pattern: 'yyyy-MM-dd HH:mm'
            }
        ],
        editUrl: 'ajaxDone1.html',
        delUrl: 'ajaxDone1.html',
        contextMenuB: true,
        paging: {total: 30, pageSize: 5},
        editMode: 'inline',
        fullGrid: true,
        showLinenumber: false
        //showCheckboxcol: true
    })

    $('#test-datagrid-array').datagrid({
        gridTitle: 'Test datagrid - Array 数据类型，dialog编辑，显示行号及复选框，表头快速筛选，显示页脚',
        showToolbar: true,
        toolbarItem: 'all',
        addLocation: 'first',
        local: 'local',
        dataUrl: 'datagrid/datagrid-array.js',
        dataType: 'array',
        columns: [
            {
                name: 'operation',
                label: '类型',
                type: 'select',
                items: [{'01': '神话'}, {'02': '传说'}, {'03': '漫画'}, {'04': '历史'}, {'05': '其他'}],
                align: 'center',
                width: 80,
                render: $.datagrid.renderItem
            },
            {
                name: 'name',
                label: '姓名',
                align: 'center',
                width: 100,
                rule: 'required'
            },
            {
                name: 'sex',
                label: '性别',
                type: 'select',
                items: [{'true': '男'}, {'false': '女'}],
                align: 'center',
                width: 40,
                render: $.datagrid.renderItem
            },
            {
                name: 'age',
                label: '年龄',
                type: 'spinner',
                attrs: {'data-max': '10000'},
                align: 'center',
                width: 45,
                calc: 'avg',
                calcTit: '平均',
                calcDecimal: 2
            },
            {
                name: 'firstname',
                label: '拼音姓',
                width: 80
            },
            {
                name: 'lastname',
                label: '拼音名',
                width: 80,
                hide: true
            },
            {
                name: 'passportno',
                label: '护照号',
                width: 100
            },
            {
                name: 'nation',
                label: '国籍',
                type: 'lookup',
                attrs: {'data-url': 'datagrid-lookup-nation.html'},
                align: 'center',
                width: 50,
                rule: 'required',
                render: function (value) {
                    return '<img src="images/datagrid/' + value + '.gif">'
                }
            },
            {
                name: 'issuestate',
                label: '签发状态',
                type: 'select',
                items: function (aa) {
                    return $.getJSON('/datagrid/demo-items-state.js')
                },
                align: 'center',
                width: 70,
                render: $.datagrid.renderItem
            },
            {
                name: 'issuedate',
                label: '签发日期',
                type: 'date',
                width: 150
            },
            {
                name: 'isdisable',
                label: '禁用',
                type: 'boolean',
                align: 'center',
                width: 40,
                render: function (value) {
                    return (value && String(value) == 'true') ? '<span style="color:red;">True</span>' : ''
                }
            },
            {
                name: 'createtime',
                label: '登记日期',
                type: 'date',
                pattern: 'yyyy-MM-dd HH:mm'
            }
        ],
        hiddenFields: ['id', 'nationid'],
        editUrl: 'ajaxDone1.html',
        delUrl: 'ajaxDone1.html',
        paging: {total: 30, pageSize: 5},
        showTfoot: true,
        editMode: 'dialog',
        fullGrid: true,
        showLinenumber: true,
        showCheckboxcol: true
    })

    $('#test-datagrid-xml').datagrid({
        gridTitle: 'Test datagrid - Xml 数据类型，显示编辑按钮列，仅允许行内编辑一行，表格不充满容器显示',
        showToolbar: true,
        toolbarItem: 'all',
        addLocation: 'next',
        local: 'local',
        dataUrl: 'datagrid/datagrid-xml.xml',
        dataType: 'xml',
        filterThead: false,
        columns: [
            {
                name: 'operation',
                label: '类型',
                type: 'select',
                items: [{'01': '神话'}, {'02': '传说'}, {'03': '漫画'}, {'04': '历史'}, {'05': '其他'}],
                align: 'center',
                width: 80,
                render: $.datagrid.renderItem
            },
            {
                name: 'name',
                label: '姓名',
                align: 'center',
                width: 100,
                rule: 'required'
            },
            {
                name: 'sex',
                label: '性别',
                type: 'select',
                items: [{'true': '男'}, {'false': '女'}],
                align: 'center',
                width: 40,
                render: $.datagrid.renderItem
            },
            {
                name: 'age',
                label: '年龄',
                type: 'spinner',
                attrs: {'data-max': '10000'},
                align: 'center',
                width: 45
            },
            {
                name: 'firstname',
                label: '拼音姓',
                width: 80
            },
            {
                name: 'lastname',
                label: '拼音名',
                width: 80,
                hide: true
            },
            {
                name: 'passportno',
                label: '护照号',
                width: 100
            },
            {
                name: 'nation',
                label: '国籍',
                type: 'lookup',
                attrs: {'data-url': 'datagrid-lookup-nation.html'},
                align: 'center',
                width: 50,
                rule: 'required',
                render: function (value) {
                    return '<img src="images/datagrid/' + value + '.gif">'
                }
            },
            {
                name: 'issuestate',
                label: '签发状态',
                type: 'select',
                items: function (aa) {
                    return $.getJSON('/datagrid/demo-items-state.js')
                },
                align: 'center',
                width: 70,
                render: $.datagrid.renderItem
            },
            {
                name: 'issuedate',
                label: '签发日期',
                type: 'date',
                width: 150
            },
            {
                name: 'isdisable',
                label: '禁用',
                type: 'boolean',
                align: 'center',
                width: 40,
                render: function (value) {
                    return (value && String(value) == 'true') ? '<span style="color:red;">True</span>' : ''
                }
            },
            {
                name: 'createtime',
                label: '登记日期',
                type: 'date',
                pattern: 'yyyy-MM-dd HH:mm'
            }
        ],
        editUrl: 'ajaxDone1.html',
        delUrl: 'ajaxDone1.html',
        paging: {total: 30, pageSize: 5},
        pagingAlign: 'left',
        editMode: 'inline',
        inlineEditMult: false,
        showEditbtnscol: true,
        contextMenuB: true
    })
</script>
<div class="bjui-pageContent">
    <div style="padding:15px; height:100%; width:100%;">
        <table id="test-datagrid-json" data-width="100%" class="table table-bordered">
        </table>
        <br>
        <table id="test-datagrid-array" data-width="100%" data-height="280" class="table table-bordered">
        </table>
        <br>
        <table id="test-datagrid-xml" data-width="100%" class="table table-bordered">
        </table>
    </div>
</div>